<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/pages/comm/comm.jsp"%>

<!-- content begin -->
<div class="container">
     <c:choose>
	 <c:when test="${empty imgPath or imgPath eq '0' }">
	  <div class="row" style="margin-top:20px;">
	    <div class=" col-xs-12">
	      <p>支付出错！支付订单不存在或订单已支付，<span class="red ss five">5</span>秒后自动跳转至首页！<a href="${hyrt}/" alt="首页">跳转</a></p>
	    </div>
	  </div>
	 </c:when>
	 
	 <c:when test="${imgPath eq '1'}">
	  <div class="row" style="margin-top:20px;">
	    <div class=" col-xs-12">
	      <p>支付出错！微信支付服务器故障！！<span class="red ss five">5</span>秒后自动跳转至首页！<a href="${hyrt}/" alt="首页">跳转</a></p>
	    </div>
	  </div>
	 </c:when>	 
	
	 <c:otherwise>
	 <div class="row">
	 
       <div class=" col-xs-12">
       		<h5 class="pay-notice">请您及时付款，以便订单尽快处理！ 订单号：${vo.orderNum } <br class="visible-xs-block">
       			<span class="pay-price text-center">应付金额：<strong class="red">${vo.payCount }元</strong>
       			</span>
       		</h5>
       </div>
       	
       <div class="clearfix"></div>
       
       <div class="panel-group" role="tablist">
       	 <div class=" panel-default">
		      <div class="panel-heading dd-panel-heading" role="tab" id="collapseListGroupHeading1">
		        <h4 class="panel-title">
		          <a class="collapsed" role="button" data-toggle="collapse" href="#collapseListGroup1" aria-expanded="false" aria-controls="collapseListGroup1">
		                             订单详情 <span class="caret"></span>
		          </a>
		        </h4>
		      </div>
		      <div id="collapseListGroup1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseListGroupHeading1" aria-expanded="false" style="height: 0px;">
		        <ul class="list-group dd-xqtext">
		          <li class="list-group-item">商品名称：${vo.videoName }</li>
		        </ul>
		      </div>
		 </div>
       </div>
        <!--list-ner-->
         <!--first-->
         <div class="panel">
            <div class="container-fluid">
               <div class="sub-content-header"><span class="sub-content-title">微信支付</span></div>           <div class="clearfix"></div>
						<div class="acc-seperate"></div>
            	<!--<h4 class="sm-titel">微信支付</h4>-->
            	<!--er wei ma-->
            	<div class="col-md-6">
                 <p class="djs-time text-center" id="ptip">距离二维码过期还剩<span class="red ss" id="time">60</span>秒，过期后请刷新页面重新获取二维码。</p>
            	   <div class="e-ma" id="ema">
            	       <img src="/image${imgPath }"/>
            	   </div>
            	   <div class="sao-text"><p>请使用微信扫一扫</p> <p>扫描二维码支付</p>      </div>
            	</div>
            	<!--er wei ma end-->
            	
            	<!--phone-->
            	<div class="col-md-6">
            	   <div class="phone-bg">
            	   	  <img src="${hyrt }/static/images/phone-bg.png" />
            	   </div>	
            	</div>
		        <!--phone end-->	
		         
		        <!--first end-->
		        
		        <!--list-ner end--> 
		      </div>
		    </div>
		</div>
	   </c:otherwise>
	 </c:choose>
</div>
<div class="clearfix"></div>
<!-- content end -->


<!-- content begin -->
<%--<div class="container">
    <div class="row">

        <div class="col-xs-12  col-sm-12 sub-content-body-right">
            <div class="div-bg">
                <div class="sub-content-header"><span class="sub-content-title">您正在订阅以下视频：</span></div>
                <div class="clearfix"></div>
                <div class="acc-seperate"></div>
                <div class="sub-content-body">
                   <span>倒计时：<i id="time" style="color:red;">60</i></span>
                   <div id="qrcode" style="margin:10px;">
   
                   </div>
                   <div id="qrcode_hd" style="margin:10px;display:none;">
                      <img id="weixinImageURL" height="302" width="299" src="${hyrt}/static/images/wxpay.png">
                   </div>
                </div>
            </div>
        </div>
    </div>
</div>--%>

<script>
   
	var codeflag=false;
	var str = '${imgPath}';
	/*
	// var str = “中文要加一个函数”;
	// var str = toUtf8(str); // 些函数是为解决中文乱码
	$("#qrcode").qrcode({
	render: "canvas", // 设置渲染方式，值为"canvas"或"table"，省略为"canvas"
	text: str, // 唯一一个必填项，二维码信息
	width: 200, // 宽，省略为256px
	height: 200, // 高，省略为256px
	background: "#fff", // 二维码背景色，省略为#fff
	//foreground: "#0f0" // 二维码前景色，省略为#000
	}); */
	var timer;
	var timer1;
	var timer5;
	 /*function a(){

		  if(stopTime==5){
			  clearInterval(timer);
		  }else{
			  stopTime=stopTime+1;
			  console.log("当前timer的值为："+stopTime);
		  }
	  };*/
	  var changetime = 60;
	  var countsfive = 5;
	  $(function(){
		 //定时器
		 if(!(str==null || str=='' || str=='1' || str=='0')){
			 timer = setInterval(countnum,1000);
			 timer1 = setInterval(issucess,1000);
		 }else{
			 timer5 = setInterval(countnum5s,1000);
		 }
	  });
	  //重新获取二维码
	  function refreshcode(){
		  if (codeflag) {
			  return false;
		  }
		  codeflag=true;
		  $.ajax({
				url : ctx + '/pay/getewm',
				type : 'post',
				dataType : 'json',
				data:{orderId:'${orderId}'},
				success : function(data) {
					if(data.code=='200'){
						if(data.imgPath=='0'){
							layer.alert('订单已支付成功，请勿重复支付！');
							window.location.href=ctx+"/";
						}else if(data.imgPath=='1'){
							$('#ptip').html("<span class=\"red ss\">微信支付服务系统繁忙！！！</span>请稍后重新点击<span class=\"red ss\" id=\"time\" onclick=\"refreshcode()\" style=\"cursor:pointer;\">刷新</span>获取支付二维码！");
						}
						$("#ema").find('img').attr("src","/image"+data.imgPath);
						$(this).html("距离二维码过期还剩<span class=\"red ss\" id=\"time\">60</span>秒，过期后请刷新页面重新获取二维码。");
						changetime=60;
						timer = setInterval(countnum,1000);
						timer1 = setInterval(issucess,1000);
					}else{
						layer.alert('该订单已失效！');
						window.location.href=ctx+"/";
					}
				}
	        });
	  }
	  
	  function countnum5s(){
		  if(!countsfive==0){
			  countsfive = countsfive-1;
			  $('.five').html(countsfive);
		  }else{
			  window.location.href=ctx+"/";
		  }
	  }
	  
	  function countnum(){
		  if(!changetime==0){
			  changetime = changetime-1;
			  $('#time').html(changetime);
		  }else{
			  codeflag=false;
			  clearInterval(timer);
			  clearInterval(timer1);
			  //$('#qrcode').hide();
			  //$('#qrcode_hd').show();
			  //<img src="${hyrt }/static/images/ema.png" />
			  $("#ema").find('img').attr("src","${hyrt}/static/images/ewm.png");
			  $('#ptip').html("支付二维码已过期，请点击<span class=\"red ss\" id=\"time\" onclick=\"refreshcode()\" style=\"cursor:pointer;\">刷新</span>重新获取支付二维码！");
		  }
	}

	function issucess(){
		  $.ajax({
				url : ctx + '/pay/issucess',
				type : 'post',
				dataType : 'json',
				data:{orderId:'${orderId}'},
				success : function(data) {
					console.info(data.msg)
					if(data.code=='200'){
					    window.location.href=ctx+"/pay/success?orderId="+'${orderId}';
					}
				}
	       })
	}

</script>
</body>
</html>
